<style scoped>
    #page-user-detail{
        background: #fff;
    }

</style>
<template>
    <div id="page-user-detail" class="page-user-detail page-wrap  page-user">
        <div class="m-user" id="userDetail" v-show="!showName&&!showPhone">
            <header-component keep-alive :page-name="pageName"></header-component>
            <div class="m-user-info">
                <div class="m-user-bar m-user-bar-l">
                    <a class="w-bar m-user-bar-avatar"><i class="ifont">&#xe606;</i><span>头像</span><span class="w-bar-ext"><span class="m-user-avatar"><img width="45" height="45" :src="data.img"></span></span></a>
                    <a class="w-bar dark"><i class="ifont">&#xe60e;</i><span>ID(唯一不变标识)</span><span class="w-bar-ext">{{data.id}}</span></a>
                    <a href="javascript:;" class="w-bar" @click="showName=true" data-show="#changeUserName" data-hide="#userDetail"><i class="ifont">&#xe60f;</i><span>昵称</span><span class="w-bar-ext"><b class="ico-next"></b></span><span class="m-user-link2 w-bar-ext" id="detailUsername" >{{data.username}}</span></a>
                    <a href="javascript:;" class="w-bar" @click="showPhone=true" data-show="#changePhone" data-hide="#userDetail"><i class="ifont">&#xe610;</i><span>手机认证</span><span class="w-bar-ext"><b class="ico-next"></b></span><span class="m-user-link2 w-bar-ext" id="detailUserphone">{{data.mobile}}</span></a>
                    <!--<a href="javascript:;" class="w-bar" data-show="#changePhone" data-hide="#userDetail"><i class="ifont">&#xe633;</i><span>邮箱认证</span><span class="m-user-link w-bar-ext" id="detailUserphone">{{mobile}}</span></a>-->
                    <a href="javascript:;" class="w-bar" data-href="?c=address" v-link="{path:'/address'}"><i class="ifont">&#xe612;</i><span>我的收货地址</span><span class="w-bar-ext"><b class="ico-next"></b></span></a>
                </div>
            </div>
        </div>

        <div class="m-user" v-show="showPhone"  id="changePhone">
            <div class="m-simpleHeader">
                <a href="javascript:;" class="m-simpleHeader-back" data-show="#userDetail" data-hide="#changePhone" @click="showPhone=false">取消</a>
                <button type="button" class="m-simpleHeader-ok" @click="resetPhone">保存</button>
                <h1>修改手机号码</h1>
            </div>
            <div class="m-user-mobile" >
                <div class="m-user-bar">
                    <div class="w-inputBar w-bar m-user-bar-border">
                        <div class="w-bar-label">手机号码</div><a href="javascript:;" class="w-bar-input-clear" style="display: none;">×</a>
                        <div class="w-bar-control"><input placeholder="输入手机号" v-el:phone class="w-bar-input" type="tel" name="phone" v-model="phone"  maxlength="11"></div>
                    </div>
                    <div class="w-inputBar w-bar m-user-mobile-codeinput">

                        <div class="w-bar-label">验证码</div>
                        <div class="w-bar-control"><input placeholder="输入验证码" v-el:code class="w-bar-input" type="tel" v-model="code" name="code" value=""><button type="button" :disabled="canSend" :class="['w-button',!canSend?'':'w-button-gray']" @click="getCode" >{{codeStr}}</button></div>
                    </div>
                    <template v-if="data.passwd">

                        <div class="w-inputBar w-bar m-user-mobile-codeinput">
                            <div class="w-bar-label">设置密码</div>
                            <div class="w-bar-control"><input placeholder="密码" v-el:password class="w-bar-input" type="password" v-model="password" name="password" value=""></div>
                        </div>
                        <div class="w-inputBar w-bar m-user-mobile-codeinput">
                            <div class="w-bar-label">再输入一次</div>
                            <div class="w-bar-control"><input placeholder="再次输入" v-el:repassword class="w-bar-input" type="password" v-model="repassword" name="password-sec" value=""></div>
                        </div>
                        <span class='w-span-mark' style='display:none;'>mark</span>
                    </template>
                </div>
            </div>
        </div>


            <div class="m-user" v-show="showName"  id="changeUserName"  >

                <div class="m-simpleHeader">
                    <a href="javascript:;" class="m-simpleHeader-back" data-show="#userDetail" data-hide="#changeUserName" @click="showName=false">取消</a>
                    <button type="button" class="m-simpleHeader-ok" @click="resetName">保存</button>
                    <h1>修改昵称</h1>
                </div>
                <div class="m-user-nickname">
                    <div class="m-user-bar">
                        <div class="w-inputBar w-bar m-user-bar-border"><a href="javascript:;" class="w-bar-input-clear" style="display: none;">×</a>
                            <div class="w-bar-control"><input placeholder="请输入昵称，2-20个字符" v-el:username v-model="username" class="w-bar-input" type="text" name="username"></div>
                        </div>
                    </div>
                </div>
            </div>

    </div>
    <pop :status-pop="statusPop" :status-toast="statusToast" :delay="delay" :msg="msg">
        <a href="javascript:;" @click="statusPop=false">确定</a>
    </pop>
</template>
<script>
    import headerComponent from '../components/header'
    import pop from '../components/pop'
    import User from '../module/user'
    module.exports = {

        data() {
            return {
                pageName:'个人资料',
                data:{}, //数据渲染
                username:'',
                password:'',
                repassword:'',
                code:'',
                phone:'',
                showName:false,
                showPhone:false,
                statusPop:false,
                statusToast:false,
                delay:2000,
                msg:'',
                canSend:false,
                codeStr:'获取验证码',
                startTime:0,
                endTime:0
            }
        },
        created(){

            this.$dispatch('isLoading',true)

        },
        async ready () {

            let res=await User.getMessage();

            if (res.status == 200 && !!res.data && !!res.data.item && res.data.item.length > 0) {

                this.data=Object.assign({},this.data,res.data.item[0]);

                this.username=res.data.item[0].username;

                this.phone=res.data.item[0].mobile;

            }

            this.$dispatch('isLoading',false)

        },
        beforeDestroy() {

        },

        methods: {

            async resetName(){

                if(!this.username) {

                    this.statusPop=true;

                    this.msg='请输入昵称'

                    return false;

                }else if(this.username.length<2||this.username.length>20){

                    this.statusPop=true;

                    this.msg='请输入2-20个字符';

                    return false;

                }


                let res=await User.setUserName(this.username)

                if(res.status == 200 && res.data && res.data.result == "ok"){

                    this.statusToast=true;

                    this.msg='修改成功'

                    this.data.username=this.username;

                    this.showName=false;

                }else if(!!res.msg){

                    this.statusPop=true;

                    this.msg=res.msg;

                }else{

                    this.statusPop=true;

                    this.msg='修改失败';
                }
            },
            async resetPhone(){

                let reg = /^[0-9A-Za-z]{8,20}$/;

                    if(!!this.password){

                        if(this.password==this.repassword){

                            if(this.password.match(reg)){

                                let res = await User.verifyPhone(this.code,this.password);

                                if (res.status == 200 && res.data && res.data.status === true) {

                                    this.statusToast=true;

                                    this.msg='绑定成功';

                                    this.data.phone=this.phone;

                                    this.showPhone=false;

                                }else{

                                    this.statusToast=true;

                                    this.msg='绑定失败请重试';

                                }

                            }else{

                                this.statusPop=true;

                                this.msg='密码格式不正确，只能为数字和字母长度至少8位'

                            }

                        }else{

                            this.statusPop=true;

                            this.msg='两次密码不一致'

                        }

                    }else{

                        let res = await User.verifyPhone(this.code);

                        if (res.status == 200 && res.data && res.data.status === true) {

                            this.statusToast=true;

                            this.msg='绑定成功';

                            this.data.phone=this.phone;

                            this.showPhone=false;

                        }else {

                            this.statusToast=true;

                            this.msg='绑定失败请重试！';


                        }
                    }
            },
            async getCode(){

                if(!this.phone){

                    this.statusToast=true;

                    this.msg='请填写手机号码';

                    return false;

                }else if(!/^1[3|4|5|7|8]\d{9}$/.test(this.phone)){

                    this.statusToast=true;

                    this.msg='手机号码格式不正确';

                    return false;
                }

                let res=await User.sendSMS(this.phone)

                if (res.status == 200 && res.data && res.data.status === true) {

                    this.statusToast=true;

                    this.msg='发送成功';

                    this.resetTime()

                }else if(!!res.msg){

                    this.statusPop=true;

                    this.msg=res.msg

                }else{

                    this.statusPop=true;

                    this.msg='验证码发送失败，请重试'

                }

            },
            resetTime(){

                if(this.endTime>Date.now()) return false;

                this.endTime=Date.now()+60000;

                this.codeStr='60秒后重新获取';

                this.canSend=true;

                this.$nextTick(()=>{

                    this.auto();

                })

            },
            auto(){

               let time = setInterval(()=>{

                    let surplus=this.endTime- Date.now();

                    if(surplus<=0){

                        this.codeStr='获取验证码';

                        this.canSend=false;

                        clearInterval(time);


                    }else{

                        let cur=Math.ceil(surplus / 1000);

                        if (cur != 0) {

                            this.codeStr=cur+'秒后重新获取';

                        }

                    }

                },1000)

            }
        },

        components:{

            headerComponent,
            pop

        },
        transition:{

            'fade':{

                enterClass:'fadeInLeft',
                leaveClass:'fadeInRight'

            }
        }
    }
</script>
